<template>
	<div id="appRoot">
		<sidebar>
			<card label="员工管理">
				<el-button slot="header" type="primary" size="small" @click="openAdd()">添加员工</el-button>
				<div class="from-query">
					<el-form :inline="true" class="demo-form-inline" @submit.native="console.log(123);return false;">
						<el-form-item label="搜索">
							<el-input size="small" v-model="queryData.phone" placeholder="员工姓名/帐号"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="getTableData(1)">查询</el-button>
						</el-form-item>
					</el-form>
				</div>
			</card>
			<div class="table-container" v-loading.body="loading">
				<template v-if="tableDataError">
					<table-data-fail type="error"></table-data-fail>
				</template>
				<template v-else-if="tableData.length > 0">
					<el-table
							:data="tableData"
							stripe
							border
							style="width: 100%">
						<el-table-column
								prop="account"
								align="center"
								header-align="left"
								label="帐号">
						</el-table-column>
						<el-table-column
								prop="name"
								align="center"
								header-align="left"
								label="姓名">
						</el-table-column>
						<el-table-column
								prop="phone"
								align="center"
								header-align="left"
								label="手机号">
						</el-table-column>
						<el-table-column
								prop="roleName"
								align="center"
								header-align="left"
								label="角色">
						</el-table-column>
						<el-table-column
								prop="state"
								align="center"
								header-align="left"
								label="状态">
						</el-table-column>
						<el-table-column
								align="center"
								header-align="left"
								label="操作">
							<template scope="scope">
								<el-button type="text" size="small" @click="openAdd(scope.row)">编辑</el-button>
								<el-button type="text" size="small" @click="openOperationRecord(scope.row.account)">入库记录</el-button>
								<el-button v-if="scope.row.state === '停用'" type="text" size="small" @click="toggleState(scope.row, '1')">启用</el-button>
								<el-button v-else type="text" size="small" @click="toggleState(scope.row, '0')">禁用</el-button>
								<!--<el-button type="text" size="small" @click="delStaff(scope.row.account)">关闭</el-button>-->
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-wrapper">
						<el-pagination
								@current-change="getTableData"
								:current-page.sync="paginationData.currentPage"
								:page-size="paginationData.pageSize"
								layout="prev, pager, next, jumper"
								:total="paginationData.total">
						</el-pagination>
					</div>
				</template>
				<template v-else>
					<table-data-fail type="empty"></table-data-fail>
				</template>
			</div>
		</sidebar>
		<el-dialog :title="dialogAddTitle" :visible.sync="dialogAddVisible" class="dialog-form">
			<el-form :model="dialogAddData" label-width="120px">
				<el-form-item label="姓名：" >
					<el-input v-model="dialogAddData.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="登录账号：" >
					<el-input v-model="dialogAddData.account" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item v-if="this.dialogAddType === 'add'" label="登录密码：" >
					<el-input v-model="dialogAddData.pwd" auto-complete="off" type="password"></el-input>
				</el-form-item>
				<el-form-item label="手 机 号：" >
					<el-input v-model="dialogAddData.phone" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="角色权限：" >
					<el-radio-group v-model="dialogAddData.roleId">
						<el-radio label="1">管理员</el-radio>
						<el-radio label="2">操作员</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="账号状态：" >
					<el-radio-group v-model="dialogAddData.state">
						<el-radio label="1">正常</el-radio>
						<el-radio label="0">锁定</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitAdd">保 存</el-button>
			</div>
		</el-dialog>
		<el-dialog title="入库记录" :visible.sync="dialogOperationRecordVisible" class="dialog-form">
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="时间">
					<el-date-picker
							v-model="dialogOperationRecordData"
							type="daterange"
							placeholder="选择时间范围">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary">查询</el-button>
				</el-form-item>
			</el-form>
			<template v-if="dialogOperationRecord.length > 0">
				<el-table
						:data="dialogOperationRecord"
						stripe
						border
						style="width: 100%">
					<el-table-column
							prop="title"
							align="center"
							header-align="left"
							label="文章标题">
					</el-table-column>
					<el-table-column
							prop="nums"
							align="center"
							header-align="left"
							label="待入库指标数（个）">
					</el-table-column>
					<el-table-column
							prop="date"
							align="center"
							header-align="left"
							label="提交时间">
					</el-table-column>
				</el-table>
				<div class="pagination-wrapper">
					<el-pagination
							@current-change="getTableData"
							:current-page.sync="paginationOperationData.currentPage"
							:page-size="paginationOperationData.pageSize"
							layout="prev, pager, next, jumper"
							:total="paginationOperationData.total">
					</el-pagination>
				</div>
			</template>
			<template v-else>
				<table-data-fail type="empty"></table-data-fail>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import sidebar from 'components/layout/sidebar.vue'
	import card from 'components/layout/card.vue'
	import tableDataFail from 'components/layout/tableDataFail.vue'
    import ajax from 'common/ajax.js'
    import ajaxUrls from 'common/ajaxUrls.js'
    import {sysUser} from 'common/unitQry.js'
	import moment from 'moment'
	export default{
		data(){
			return{
				loading: false,
				queryData: {
				    phone: ''
				},
				paginationData:{
					currentPage: 1,
					pageSize: 10,
					total: 0
				},
				tableDataError: false,
				tableData: [],
				dialogAddTitle: '添加员工',
				dialogAddType: 'add',
                dialogAddVisible: false,
				dialogAddData:{
                    account: '',
                    name: '',
                    phone: '',
                    pwd: '',
                    roleId: '1',
                    state: '1'
				},
                dialogOperationRecordVisible: false,
                dialogOperationRecordAccount: '',
                dialogOperationRecordData: [],
				dialogOperationRecord:[],
                paginationOperationData:{
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                }
			}
		},
        mounted(){
		    sysUser();
            this.getTableData();
        },
		methods: {
            openOperationRecord(account){
                this.dialogOperationRecordVisible = true;
                this.dialogOperationRecordAccount = account;
                this.qryOperationRecord()
			},
            closeOperationRecord(){
                this.dialogOperationRecordVisible = false;
			},
			qryOperationRecord(current){
                let data = {
                    pageNum: current || this.paginationOperationData.currentPage,
                    pageRow: this.paginationOperationData.pageSize,
                    startDate:  this.dialogOperationRecordData[0] ? moment(this.dialogOperationRecordData[0]).format('YYYY-MM-DD') : '',
                    endDate: this.dialogOperationRecordData[1] ? moment(this.dialogOperationRecordData[1]).format('YYYY-MM-DD') : '',
                };
                data = Object.assign(data, {account: this.dialogOperationRecordAccount});
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.FileConfig,
                    action: 'qryFileConfigByStaff',
                    data: data
                }).then(function (data) {
                    this.dialogOperationRecord = data.data.items || [];
                    this.paginationOperationData.total = data.data.totalNum || 0;
                }.bind(this)).catch(function (err) {

                })
			},
            delStaff(account){
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.staff,
                    action: 'delSysStaff',
                    data: {account: account}
                }).then(function (data) {
                    this.dialogOperationRecord = data.data.items || [];
                    this.paginationOperationData.total = data.data.totalNum || 0;
                }.bind(this)).catch(function (err) {

                })
			},
            openAdd(editData){
                if(editData){
                    this.dialogAddType = 'edit';
                    this.dialogAddTitle = '编辑员工信息';
                    this.dialogAddData = {
                        account: editData.account,
                        name: editData.name,
                        phone: editData.phone,
                        roleId: editData.roleName === '管理员' ?  '1' : '2',
                        state: editData.state === '停用' ? '0' : '1'
                    }
				}else {
                    this.dialogAddType = 'add';
                    this.dialogAddTitle = '添加员工';
                    this.dialogAddData = {
                        account: '',
                        name: '',
                        phone: '',
                        pwd: '',
                        roleId: '1',
                        state: '1'
                    };
                }
                this.dialogAddVisible = true;
			},
			closeAdd(){
                this.dialogAddVisible = false;
			},
            submitAdd(){
			    let action = this.dialogAddType === 'add' ? 'addSysStaff' : 'modSysStaff';
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.staff,
                    action: action,
                    data: this.dialogAddData
                }).then(function (data) {
                    this.closeAdd();
                    this.getTableData();
                }.bind(this)).catch(function (err) {

                })
			},
            toggleState(staffData, state){
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.staff,
                    action: 'modSysStaff',
                    data: {
                        account: staffData.account,
                        name: staffData.name,
                        phone: staffData.phone,
                        roleId: staffData.roleName === '管理员' ?  '1' : '2',
                        state: state
					}
                }).then(function (data) {
                    this.getTableData();
                }.bind(this)).catch(function (err) {

                })
			},
            getTableData(current){
			    let data = {
					pageNum: current || this.paginationData.currentPage,
					pageRow: this.paginationData.pageSize
				};
                data = Object.assign(data, this.queryData);
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.staff,
                    action: 'qrySysStaff',
                    data: data
                }).then(function (data) {
                    this.tableData = data.data.items || [];
                    this.paginationData.total = data.data.totalNum || 0;
                }.bind(this)).catch(function (err) {

                })
			}
		},
		components:{
			sidebar,
			card,
			tableDataFail
		}
	}
</script>

<style lang="scss">
</style>